<script setup lang="ts">
import Public from '../../components/Public.vue'
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { userListApi } from '../../services'
import type { EChartsType } from 'echarts'

const activeName = ref('first')
const myChartDom = ref<HTMLDivElement | null>(null)
const myChart = ref<EChartsType | null>(null)


const getUserList = async () => {
  const res = await userListApi({ page: 1, pagesize: 10 })
  const list = res.data.values.list
  console.log(list)
  // 绘制图表
  myChart.value?.setOption({
    title: {
      text: '用户展示'
    },
    tooltip: {},
    xAxis: {
      data: list.map(v => v.username)
    },
    yAxis: {},
    series: [
      {
        name: '年龄',
        type: 'bar',
        data: list.map(v => v.age)
      }
    ]
  })
}

getUserList()

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  myChart.value = echarts.init(myChartDom.value)
})

</script>

<template>
 <Public >
   <el-row :gutter="20">
      <el-col :span="24">
        <div class="box"></div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="18">
        <div class="box box1">
          <el-tabs v-model="activeName">
            <el-tab-pane label="第一项" name="first" class="tab-con">
              <div class="chart-wrap" ref="myChartDom"></div>
            </el-tab-pane>
            <el-tab-pane label="第二项" name="second">

            </el-tab-pane>
            <el-tab-pane label="第三项" name="third">
              <input type="text">
            </el-tab-pane>
            <el-tab-pane label="第四项" name="fourth" class="list">
              <ul>
                <li v-for="item in 20" :key="item">{{ item }}</li>
              </ul>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="box"></div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="box"></div>
      </el-col>
      <el-col :span="8">
        <div class="box"></div>
      </el-col>
      <el-col :span="8">
        <div class="box"></div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8" :offset="8">
        <div class="box"></div>
      </el-col>
      <el-col :span="8">
        <div class="box"></div>
      </el-col>
    </el-row>
 </Public>

</template>

<style lang="scss" scoped>
.box {
  background: #fff;
  min-height: 100px;
  border-radius: 5px;
}
.box1 {
  height: 400px;
  padding: 0 15px;
  .el-tabs {
    height: 100%;
  }
  .list {
    height: 100%;
    overflow: auto;
  }
}
.tab-con {
  height: 100%;
}
.chart-wrap {
  height: 100%;
}
.el-row {
  margin: 20px;
}

</style>